<template>
	<view class="addTask">
		<view class="addTask">
			<view class="top">
				<view class="com df" style="justify-content: center;">
					<image class="picture" :src="detialInfo.picUrl" mode=""></image>
				</view>
				<view class="com df">
					<view class="tt">地块名：</view>
					<view class="type df">
						<view class="text">{{detialInfo.landName}}</view>
					</view>
				</view>
				<view class="com df">
					<view class="tt">品种：</view>
					<view class="type df">
						<view class="text">{{detialInfo.variety}}</view>
					</view>
				</view>
				<view class="com df">
					<view class="tt">任务状态：</view>
					<view class="type df">
						<view class="text">{{detialInfo.state == 0 ? "未完成":"已完成"}}</view>
					</view>
				</view>
				<view class="com df">
					<view class="tt" >任务类型：</view>
					<view class="type df">
						<view class="text">{{detialInfo.taskType}}</view>
					</view>
				</view>
				<view class="com df" :style="detialInfo.state == 0 ? {border:0}:''">
					<view class="tt">下发时间：</view>
					<view class="type df">
						<view class="text">{{detialInfo.taskIssueTime}}</view>
					</view>
				</view>
				<view class="com df" v-if="detialInfo.state == 1">
					<view class="tt">完成时间：</view>
					<view class="type df">
						<view class="text">{{detialInfo.taskFinishTime}}</view>
					</view>
				</view>
				<view class="com df" style="border: 0;" v-if="detialInfo.state == 1">
					<view class="tt">操作人：</view>
					<view class="type df">
						<view class="text">{{detialInfo.operator}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="btn" @click="urge" v-if="status == '未完成'">催一催</view> -->
	</view>
</template>

<script>
	import {findTaskDetailById} from "@/api/api.js"
	export default {
		data() {
				return {
					detialInfo:{},
					dispatchTime:'2022/03/12 08:23:11',
					complateTime:'2022/04/04 12:22:45',
					status:'未完成',
					type:'整地',
					operator:'张三',
					taskId:''
				}
			},
			onLoad(routerParams) {
				console.log("路由参数：",routerParams);
				this.taskId = routerParams.id
			},
			onShow() {
				this.getTaskDetail()
			},
			methods: {
				async getTaskDetail(){
					let query = `id=${this.taskId}`
					const res = await findTaskDetailById(query)
					console.log('任务详情：',res);
					if(res?.data.code == 200){
						this.detialInfo = res.data.data
					}else{
						uni.showToast({
							icon:"error",
							title:"获取任务详情失败"
						})
					}
				},
				urge(){
					uni.showToast({
						icon:'success',
						title:'成功'
					})
				},
			}
		}
</script>

<style lang="scss" scoped>
	.picture{
		border-radius: 12rpx;
		height: 400rpx;
		width: 100%;
	}
	.addTask {
		.df {
			display: flex;
		}

		.top {
			width: 690rpx;
			// height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 0 30rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.12);

			.com {
				justify-content: space-between;
				font-size: 30rpx;
				padding: 20rpx 0;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

				.tt {
					color: rgba(68, 78, 104, 0.7);
				}

				.type {
					// color: #17CC77;

					.text {
						margin-right: 18rpx;
					}

					.input {
						margin-top: -20rpx;
						width: 180rpx;
					}

					.image {
						width: 12rpx;
						height: 22rpx;

						image {
							margin-top: 10rpx;
							width: 12rpx;
							height: 22rpx;
						}
					}
				}
			}
		}

		.btn {
			position: absolute;
			bottom: 91rpx;
			left: 50%;
			margin-left: -140rpx;
			width: 280rpx;
			height: 84rpx;
			background: #1BC46D;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
			border-radius: 12rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>